<template>
  <div class="sidebar">
    <Icon v-for="icon in icons" :key="icon.name" :icon="icon" @dragstart="onDragStart(icon)" draggable="true">
      <span>{{ icon.name }}</span>
    </Icon>
  </div>
</template>

<script>
import Icon from './IconItem.vue';

export default {
  name: 'SideBar',
  components: {
    Icon
  },
  data() {
    return {
      icons: [
        { name: '飞机', src: require('@/assets/icons/plane.png') },
        { name: '导弹', src: require('@/assets/icons/missile.png') },
        { name: '雷达', src: require('@/assets/icons/radar.png') }
      ]
    };
  },
  methods: {
    onDragStart(icon) {
      event.dataTransfer.setData('icon', JSON.stringify(icon));
    }
  }
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  border-right: 1px solid #ccc;
  padding: 10px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
